<template>
  <div id="vanCard" v-if="teamInfo != null">
    <van-card :desc="teamInfo.description"
              :title="teamInfo.name"
              :thumb="teamInfo.imageUrl"
    >
      <template #tags style="margin-bottom: 3px;margin-top: 10px">
        <van-image v-for="user in teamInfo.userList" style="margin-right: 4px;margin-top: 3px"
                   round
                   width="25px"
                   height="25px"
                   :src="user.avatarUrl"
                   fit="cover"
        />
      </template>
      <template #bottom style="margin-bottom: 3px">
        <div>
          队伍需{{teamInfo.maxNum}} | 现人数{{teamInfo.currentTeamNum}} {{teamInfo.maxNum == teamInfo.currentTeamNum ? '已满' : ''}}
          <van-tag style="margin-left: 3px" plain type="primary">{{teamStatus[teamInfo.status]}}</van-tag>
        </div>
        <div>
          过期时间：{{teamInfo.expireTime}}
        </div>
      </template>
    </van-card>
  </div>

  <div>
    密码：
  </div>

  <van-button type="primary" @click="addTeam">加入队伍</van-button>

  <van-loading  vertical v-if="!teamInfo">
    <template #icon>
      <van-icon name="star-o" size="30" />
    </template>
    加载中...
  </van-loading>

</template>

<script setup lang="ts">
import {useRoute, useRouter} from "vue-router";
import {teamStatus} from "../constant/TeamStatus.ts";
import {onMounted, ref} from "vue";
import {addTeam, dissolutionTeam, quitTeam, selectOneTeam} from "../api/teamApi.ts";
import {showToast} from "vant";
import {getCurrentUserAPI} from "../api/userApi.ts";
import {userStore} from "../stores/user/user.ts";

const route = useRoute();
const router = useRouter();
const teamInfo = ref();
const teamId = ref();
const userIdList = ref();

//排除队长意外的成员信息
const teamUserList = ref();
//队长信息
const teamUser = ref({});
const userStoreAPI = userStore();
const currentUserId = ref();



// 加载队伍信息
onMounted(async ()=>{
  //拿到当前用户的id
  currentUserId.value = userStoreAPI.getCurrentUser()?.id;

  teamId.value = route.query.teamId;
  userIdList.value = route.query.userIdList;
  const teamSelectOneRequest = {
    teamId: teamId.value,
    userIdList: userIdList.value
  };
  console.log("teamSelectOneRequest",teamSelectOneRequest)

  const res = await selectOneTeam(teamSelectOneRequest);
  if (200 === res.code){
    teamInfo.value = res.data;
    console.log("teamInfo",JSON.stringify(teamInfo.value));

    //获取队长信息 + 其他成员的信息
    const userId = teamInfo.value.userId;
    teamUserList.value = teamInfo.value.userList.filter(user => user.id!== userId);
    teamInfo.value.userList.forEach(user => {
      if (user.id == userId){
        teamUser.value = user;
        return;
      }
    });
    console.log('成员信息',teamUserList.value);
    console.log('队长信息',teamUser.value);

  }
});


const addTeam = () => {
  alert("加入队伍")
}



</script>

<style scoped>
#vanCard :deep(.van-card__thumb){
    height: 75px;
    width: 75px;
}

</style>